<template>
  <div class="home">
    <header>
      <h1>Vue Admin</h1>
      <router-link to="/home">首页</router-link>
      <router-link to="/features">特性</router-link>
    </header>
    <main>
      <aside>
        <router-link to="/home/a">A</router-link>
        <router-link to="/home/b">B</router-link>
        <router-link to="/home/c">C</router-link>
      </aside>
      <div class="content">
        <router-view></router-view>
      </div>
    </main>
    <footer>
      <p>Vue Admin</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  beforeRouteEnter(to, from, next) {
    console.log("在渲染该组件的对应路由调用");
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log("在当前路由改变, 但是该组件被复用时调用");
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("离开该组件对应的路由时调用");
    next();
  }
}
</script>

<style scoped>
header{
  background-color: #42b983;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header a{
  color: #fff;
  text-decoration: none;
}
main{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
aside{
  width: 200px;
  background-color: #eee;
  padding: 10px;
}
aside a{
  display: block;
  text-decoration: none;
  color: #000;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.content{
  flex: 1;
  padding: 10px;
}
footer{
  background-color: #42b983;
  color: #fff;
  padding: 10px;
  text-align: center;
}
</style>